<!DOCTYPE html>
<?python import datetime, time
	
	def format_state(state,comparison):
		if state == comparison:
			return 1
		else:
			return 0
?>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:xi="http://www.w3.org/2001/XInclude"
	  xmlns:py="http://genshi.edgewall.org/">
  <xi:include href="layout.html" />
  <head>
	<title>Poll</title>
	
	<script type="text/javascript">
	  
	  	  function loadTagForm(a) {
		$.get("${url('/tag_add/%s/' % poll.id)}", {}, function(html) {
		  var form = a.parent().hide().after(html).next();
		  function closeForm() {
			form.slideUp("fast", function() { a.parent().fadeIn(); form.remove() });
			return false;
		  }
		  function initForm() {
			form.find("input[@name='cancel']").click(closeForm);
			form.submit(function() {
			  var data = form.find("input[@type='text'], textarea").serialize();
			  $.post("${url('/tag_add/%s/' % poll.id)}", data, function(html) {
				var elem = $(html).get(0);
				if (/form/i.test(elem.tagName)) {
				  form.after(elem).remove();
				  form = $(elem);
				  initForm();
				} else {
				  if ($("span.tags").length == 0) {
					a.parent().before('<span class="tags"></span>');
				  }
				  $("span.tags").append($(elem));
				  closeForm();
				}
			  });
			  return false;
			});
		  }
		  initForm();
		});
	  }
	  
	  $(document).ready(function() {
	  $("a.action").click(function() {
		  loadTagForm($(this));
		  return false;
		});
	  });

	  
	</script>
	
  </head>
  <body class="poll">
	<span py:if="poll">
	<div id="center_column_item">
	  <h1>${poll.title}</h1>
		<h3>Tags</h3>
		<p>
		<span class="tags">
		
			
			<xi:include href="tag_summary.html" py:for="tag in poll.tags" />
		</span>				
			<span class="tag"> 
			[ <a class="action" href="${url('/tag_add/%s/' % poll.id)}"> + </a>  
			/ <a  href="${url('/tag_remove/%s/' % poll.id)}"> - </a> ]
			</span>

		
</p>				
		
	</div>
	<div id="center_column_item">
		<h3>Graphs</h3>
		<p>
			<span name="graph">

			
			
			<div id="stategraph" style="width:100%;height:5em;padding: 0.0em 0.25em"/>
			<div id="valuegraph" style="width:100%;height:15em;"/>
			<script id="source" language="javascript" type="text/javascript">
			
				$(function () {
				    
					var l1 = ${"[" + ''.join(["[%s, %s]," %((row[0] + time.altzone)*1000,row[2]) for row in rrdb])[:-1]  + "];"}
					
					var b1 = ${"[" + ''.join(["[%s, %s]," %((row[0] + time.altzone)*1000,format_state(row[1],-1)) for row in rrdb])[:-1]  + "];"};	
					var b2 = ${"[" + ''.join(["[%s, %s]," %((row[0] + time.altzone)*1000,format_state(row[1],0)) for row in rrdb])[:-1]  + "];"};
					var b3 = ${"[" + ''.join(["[%s, %s]," %((row[0] + time.altzone)*1000,format_state(row[1],1)) for row in rrdb])[:-1]  + "];"};
			
				    $.plot($("#valuegraph"), [ { data: l1, color:6 } ], {xaxis: {mode: "time",}});
					$.plot($("#stategraph"), [ { data: b1, color:0, lines:{show: true, fill: true }},{ data: b2,color:3,lines: {  show: true, fill: true }},{ data: b3,color:2,lines: { show: true, fill: true }} ], {xaxis: {mode: "time",}});
					
				});
				
				
				$(document).ready(function() {
					$('#raw_data').hide();
				});

				
				</script>	  	
			
		<table py:if="poll.events" class="event" width="100%"> 
			<h2>Events</h2>
			<tr py:for="event in poll.events">
			
	  
				<xi:include href="event_summary.html"/>

			</tr>
		</table>
		
			<a href="#" onclick="$('#raw_data').toggle();">Toggle Data</a> | 
			<a href="${url('/poll_edit/%s/' % poll.id)}">Edit Poll</a> | 
			<a href="${url('/poll_delete/%s/' % poll.id)}"  onClick="return confirm('Click OK to delete the \'\'${poll.title}\'\' poll.');">Delete Poll</a>
						
			</span>
			</p>
		</div>
		<div id="center_column_item">
		<span id="raw_data">
		<p>
			<table width="100%" style="text-align: left">
				<thead>
					<tr><th>DateTime</th><th>Status</th><th>Value</th><th>Details</th></tr>
				</thead>
				<tbody>
					<tr py:for="row in rrdb">
						<td>${row[4]}</td><td>${row[1]}</td><td>${row[2]}</td><td><pre>${row[3]}</pre></td>
					</tr>
				</tbody>
			</table>
			</p>
			</span>
		</div>
			

			</span>
  </body>
</html>
